<template>
  <div>
    <div class="topBar">
      <div class="first-line">
        <h1>Checker</h1>
        <div class="addtion">
          <el-button size="mini" @click="addtion()">Create</el-button>
        </div>
      </div>
      <div class="second-line">
        <div class="search-input">
          <el-input
            v-model="serachNameValue"
            @input="searchName"
            placeholder="Search by name"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </div>

    <el-table
    class="el-table"
      :row-style="{ height: '0px' }"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :data="visableInfo"
    >
      <el-table-column
        v-for="(item, index) in cloumnName"
        :key="index"
        :label="item.label"
        show-overflow-tooltip
        :width="cloumnName[index].label == 'Actions' ? '75' : '410'"
      >
        <template slot-scope="scope">
          {{ scope.row[item.prop] }}
          <el-dropdown v-if="cloumnName[index].label == 'Actions'">
            <span>
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><span @click="jumpToCV(scope.row.id)">Edit </span></el-dropdown-item
              >
              <el-dropdown-item
                ><span @click="deleteChecker(scope.row.id)" style="color: red"
                  >Delete
                </span></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>

          <!-- <el-button
            v-if="cloumnName[index].label == '操作'"
            type="info"
            @click="jumpToCV(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            v-if="cloumnName[index].label == '操作'"
            type="danger"
            @click="deleteChecker(scope.row.id)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next ,total"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="sizeChange"
        @current-change="currentChange"
        @prev-click="prevClick"
        @next-click="nextClick"
      >
      </el-pagination>
    </div>
    <router-view class="container checker-edit"></router-view>
  </div>
</template>

<script>
module.exports = {
  data: function () {
    return {
      serachNameValue: "",
      currentChecker: {},
      ckeckerEditVisible: false,
      cloumnName: [
        {
          label: "Name",
          prop: "name",
        },
        {
          label: "Describe",
          prop: "describe",
        },
        {
          label: "Date",
          prop: "updateTime",
        },
        {
          prop: "option",
          label: "Actions",
        },
      ],
      info: [],
      visableInfo: [],
      pageSize: 10,
      total: 0,
      currentPage: 1,
    };
  },
  methods: {
    getAllChecker: async function () {
      const { data } = await axios.get("/checker/get-all-checker");
      this.originInfo = data.info;
      this.info = data.info;
      this.visableInfo = this.info;
      this.handlePage();
    },

    handlePage: function () {
      this.visableInfo = this.info.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
      this.calTotal();
    },

    calTotal: function () {
      this.total = this.info.length;
    },

    sizeChange: function (pageSize) {
      this.pageSize = pageSize;
      this.handlePage();
    },

    currentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.handlePage();
    },

    prevClick: function (currentPage) {
      this.currentPage = currentPage;
      this.handlePage();
    },

    nextClick: function (currentPage) {
      this.currentPage = currentPage;
      this.handlePage();
    },

    addtion: function () {
      this.$router.push({ path: "/checker-validate" });
    },

    deleteChecker: function (id) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data } = await axios.get(`/checker/delete-checker?id=${id}`);
        if (data.success) {
          const deletedIndex = this.info.findIndex((item) => item.id === id);
          this.$message({ message: data.message, type: "success" });
          this.info.splice(deletedIndex, 1);
          this.handlePage();
        }else{
          this.$message.error(data.message)
        }
      });
    },

    jumpToCV: function (id) {
      this.$router.push({ path: "/checker-validate", query: { checkerId: id } });
    },
    cellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return {
        height: "50px",
        padding: "0",
        textAlign: columnIndex === 0 ? "left" : "center",
      };
    },
    headerCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return { textAlign: columnIndex === 0 ? "left" : "center", paddingBottom: 0 };
    },
    searchName: function (name, v) {
      const info = this.originInfo;
      this.info = info.filter((item) => item.name.includes(name));
      this.handlePage();
    },
  },
  created: function () {
    this.getAllChecker();
  },
};
</script>

<style scope>
.addtion {
  margin: 20px;
}
.edit {
  display: flex;
  flex-direction: column;
}
.edit-row {
  display: flex;
  margin-bottom: 20px;
}
.edit-name {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.addtion {
  margin: 0;
  margin-bottom: 2px;
  align-self: flex-end;
}

.addtion .el-button {
  width: 100px;
  height: 35px;
  background: #1563ff;
  color: #fff;
}
.pagination {
  height: 10vh;
}
.first-line {
  display: flex;
  justify-content: space-between;
}
.first-line h1 {
  margin-bottom: 0px;
}
.second-line {
  border-top: 5px solid #dce0e6;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  background-color: #f7f8fa;
  align-items: center;
}
.el-table{
  height: calc(100vh - var(--breadcrumb-height) - var(--top-bar-height) - var(--nav-height));;
  overflow: auto;
}
*{
  --top-bar-height:170px
}
</style>
